<template>
	<view class="recharge-container">
		<view class="topVue">
			<view class="status"></view>
			<view class="navVue">
				
				<image src="../../static/imgs/back.png" 
					style="width: 36rpx; height: 36rpx;" 
					@click="backFun"></image>
			
				<view class="nav-title">团队</view>
				<view style="width: 36rpx; height: 36rpx;"></view>	
			</view>
		</view>
		
		<view class="place"></view>
		
		<view class="banner">
			<view class="li">
				<text style="font-size: 26rpx;color: #333333;">直推业绩</text>
				<u-gap height="30"></u-gap>
				<text style="font-weight: 600; font-size: 40rpx;">{{ direct }}</text>
			</view>
			<view class="li">
				<text style="font-size: 26rpx;color: #333333;">团队业绩</text>
				<u-gap height="30"></u-gap>
				<text style="font-weight: 600; font-size: 40rpx;">{{ team }}</text>
			</view>
		</view>
		
		<view class="subsectionVue">
			<u-subsection :list="tabs" :current="current" mode="button" font-size="26" active-color="#D55B94" @change="change"></u-subsection>
		</view>
		
		<view class="thVue">
			<view class="item">时间</view>
			<view class="item" style="text-align: center;">用户</view>
			<view class="item" style="text-align: right;">金额</view>
		</view>
		<scroll-view scroll-y="true" class="scrollVue">
			<view class="tdVue" v-for="(item, index) in list" :key="index">
				<view class="item">{{item.createTime.split(" ")[0]}}</view>
				<view class="item" style="text-align: center;">{{item.name |conceal()}}</view>
				<view class="item" style="text-align: right;">{{item.rechargeAmount}}</view>
			</view>
		</scroll-view>
		
	</view>
</template>

<script>
	export default {
		data(){
			return {
				tabs: [{name: '直推明细'},{name: '团队明细'}],
				current: 0,
				list: [],
				direct: 0,
				team: 0
			}
		},
		onLoad() {
			this.getTeamInfo();
			this.getList()
		},
		methods: {
			getTeamInfo(){
				this.$http
					.post(`/front/user/teamInfo`)
					.then((res) => {
						this.direct = res.obj.direct
						this.team = res.obj.team
					})
					.catch(() => {});
			},
			
			getList(){
				let url = ["/front/user/directDetail", "/front/user/teamDetail"]
				this.$http
					.post(url[this.current])
					.then((res) => {
						this.list = res.obj
						console.log(res)
					})
					.catch(() => {});
			},
			
			
			
			backFun(){
				uni.navigateBack({
					delta: 1
				})
			},
			change(e){
				this.current = e
				this.list = []
				this.getList()
			}
		}
	}
</script>

<style lang="less" scoped>
	.scrollVue {
		width: 100%;
		height: calc(100vh - var(--status-bar-height) - 228rpx - 210rpx - 90rpx - var(--window-bottom) - var(--window-top));
		margin : 0 auto;
		box-sizing: border-box;
	}
	.thVue {
		width: 690rpx;
		height: 60rpx;
		background: #FFE3F0;
		display: flex;
		align-items: center;
		margin: 20rpx auto 0;
		padding: 0 20rpx;
		box-sizing: border-box;
		.item {
			width: 33.33333%;
			font-size: 26rpx;
		}
	}
	.tdVue {
		width: 690rpx;
		height: 60rpx;
		background: #fff;
		display: flex;
		align-items: center;
		margin: 0rpx auto;
		padding: 0 20rpx;
		box-sizing: border-box;
		.item {
			width: 33.33333%;
			font-size: 26rpx;
		}
	}
	
	.subsectionVue {
		width: 690rpx;
		margin: 30rpx auto;
	}
	.banner {
		width: 690rpx;
		height: 208rpx;
		background: #FFFFFF;
		box-shadow: 0px 4rpx 20rpx 0px rgba(0,0,0,0.05);
		border-radius: 20rpx;
		margin: 20rpx auto 0;
		display: flex;
		box-sizing: border-box;
		.li {
			width: 50%;
			height: 208rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
		}
	}
	
	.recharge-container {
		width: 100%;
		height: 100%;
		background: url("../../static/imgs/bg.png") no-repeat;
		background-size: 100% 100%;
		box-sizing: border-box;
		position: fixed;
		.place {
			height: calc(var(--status-bar-height) + 92rpx);
		}
		
		.topVue {
			width: 100%;
			position: absolute;
			left: 0;
			top: 0;
			z-index: 99;
			.status {
				width: 100%;
				height: var(--status-bar-height);
			}
			.navVue {
				width: 100%;
				height: 92rpx;
				background: linear-gradient(to right, #FFFBFF, #FFE7F4);
				display: flex;
				justify-content: space-between;
				align-items: center;
				box-sizing: border-box;
				padding: 0 30rpx;
				.nav-title {
					width: 420rpx;
					height: 92rpx;
					font-size: 36rpx;
					color: #04094C;
					text-align: center;
					line-height: 92rpx;
				}
			}
		}
	}
</style>